<template>
<div>
  <label class="radio" v-for="option in options" :key="option.value">
    <input
      type="radio"
      :value="option.value"
      :checked="checked === option.value"
      @change="$emit('change', $event.target.value)"
    >
    <span>{{ option.label || option.value }}</span>
  </label>
</div>
</template>

<script>
export default {
  name: 'app-radio',
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: String,
    options: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="stylus">
label.radio + label.radio
  margin-left 42px
input[type="radio"]
  all unset
  cursor pointer
  box-sizing border-box
  display inline-block
  position relative
  width 16px
  height 16px
  border-radius 8px
  border 2px solid #1973e8
  vertical-align middle
  &::before
    content ''
    position absolute
    top 2px
    left 2px
    width 8px
    height 8px
    border-radius 4px
    background #1973e8
    opacity 0
    transition opacity .2s ease-in
  &:checked::before
    opacity 1
  + span
    margin-left 6px
    vertical-align middle
</style>